// Theme的主题样式，通过变量设置不同theme
// 使用 dark 主题， 一些变量在 dark/setting.scss 设置
.theme-#{$theme-name} {

  .app-wrapper {
    background: $app-bg;
  }

  // 主体部分
  .app-main {
    background-color: $app-main-bg;
    // breadcrumb
    .el-breadcrumb {
      margin-left: 0px;
      line-height: 60px;
      width: 100%;
      .el-breadcrumb__inner {
        a, .no-redirect {
          font-size: $breadcrumb-font-size;
          font-weight: $breadcrumb-font-weight;
          color: $breadcrumb-color;
        }
        a:hover {
          color: $breadcrumb-hover-color;
        }
        .no-redirect {
          color: $theme-color;
        }
      }
    }
    .app-body {
      background-color: $app-body-bg;
    }
  }

  // hamburger
  .hamburger.svg-icon {
    color: $hamburger-color;
  }

  // 导航栏（header）

  // 页签栏（tag）
  .tags-view-container {
    border-bottom: 1px solid $border-color;
    background-color: #eee;
    .tags-view-wrapper {
      .tags-view-item {
        border-right: 1px solid #f5f5f5;
        background-color: #fff;
        color: #606266;
        border-bottom: 1px solid #f5f5f5;
        &.active {
          background: #f5f5f5;
          border-bottom: none;
        }
        .el-icon-close {
          &:hover {
            background-color: $tab-close-bg-color;
          }
        }
      }
    }
  }

  // 菜单栏logo
  .sidebar-logo-container {
    .sidebar-title {
      color: $side-text;
    }
  }
  // 菜单项目
  @mixin sidebar-menu-style {
    color: $side-text;
    i {
      color: $side-text;
    }
    // border-bottom: $sidebar-menu-bottom-border;
  }
  // 选中时 title 颜色
  @mixin sidebar-submenu-active-style {
    // 注释部分针对 字体颜色 和 字体图标 进行颜色设置
    color: $sidebar-menu-active-color !important;
    background-color: $sidebar-menu-active-bg;
    border-bottom: $sidebar-menu-bottom-border;
    i {
      color: $sidebar-menu-active-color !important;
    }
    // .svg-icon {
    //   filter: drop-shadow($sidebar-menu-active-icon 80px 0);
    //   transform: translateX(-80px);
    // }
      .custom-icon {
        color: $sidebar-menu-active-icon !important;
      }
  }
  // 侧边栏 menu 展开样式 mixin
  @mixin sidebar-submenu-open-style {
    &:hover {
      background-color: $sidebar-menu-open-hover-bg !important;
    }
    &.is-active {
      background-color: $sidebar-menu-active !important;
    }

  }
  // 侧边栏 menu hover样式 mixin
  @mixin sidebar-menu-hover-style {
    background-color: $sidebar-menu-hover-bg !important;
  }
  // 侧边栏 折叠 mixin
  @mixin sidebar-collapse-menu-style {
    color: $side-collapse-text;
    i {
      color: $side-collapse-text;
    }
    background-color: $sidebar-collapse-menu-bg !important;
  }
  // 侧边栏 折叠hover mixin
  @mixin sidebar-collapse-menu-hover-style {
    color: $side-collapse-text-hover;
    i {
      color: $side-collapse-text-hover;
    }
    background-color: $sidebar-collapse-menu-hover-bg !important;
  }

  .el-submenu {
    .el-submenu__title {
      @include sidebar-menu-style;
      @extend %unable-select;
    }
    &.is-active {
      >.el-submenu__title {
        @include sidebar-submenu-active-style;
      }
    }
    // 展开的菜单栏样式
    &.is-opened {
      .el-submenu__title {
        @include sidebar-submenu-open-style;
      }
      .custom-icon{
        color: $theme-color;
      }
    }
  }
  .el-menu-item {
    @include sidebar-menu-style;
    @extend %unable-select;
    &.is-active {
      position: relative;
      background-color: #3b414d !important;
      color: $theme-color !important;
      &::after {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 18px;
        right: 30px;
        border-top: solid 5px transparent;
        border-right: solid 10px $theme-color;
        border-bottom: solid 5px transparent;
      }
    }
  }
  .el-submenu__title:hover {
    @include sidebar-menu-hover-style;
  }
  .el-menu-item:hover {
    @include sidebar-menu-hover-style;
  }
  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    @include sidebar-menu-hover-style;
  }
  .el-menu--horizontal .el-menu .el-submenu__title:hover {
    @include sidebar-menu-hover-style;
  }

  // 侧边栏折叠（隐藏）- logo样式
  .hideSidebar .sidebar-logo-container {
    border-bottom: none !important;
  }
  // 侧边栏折叠（隐藏）- 父菜单样式
  .el-menu--collapse {
    .submenu-title-noDropdown, .el-submenu .el-submenu__title {
      border-bottom: none;
    }
    .menu-wrapper .el-menu-item {
      &.is-active {
        background-color: #3b414d !important;
        color: $theme-color !important;
        &::after {
          display: none !important;
        }
      }
    }
  }
  // 侧边栏折叠（隐藏）- 子菜单样式
  .el-menu--vertical {
    // hover时，子菜单样式
    .el-menu.el-menu--popup.el-menu--popup-right-start {
      padding: 0px;
      margin: 0;
    }
    .el-submenu__title {
      @include sidebar-collapse-menu-style;
    }
    .el-menu-item {
      @include sidebar-collapse-menu-style;
      &.is-active {
        background-color: #3b414d !important;
        color: $theme-color !important;
        &::after {
          display: none;
        }
      }
    }
    .el-submenu__title:hover {
      @include sidebar-collapse-menu-hover-style;
    }
    .el-menu-item:hover {
      @include sidebar-collapse-menu-hover-style;
    }
    .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
      @include sidebar-collapse-menu-hover-style;
    }
    .el-menu--horizontal .el-menu .el-submenu__title:hover {
      @include sidebar-collapse-menu-hover-style;
    }
  }
  // topmenu 状态下，下拉的展示
  .el-menu--horizontal {
    .nest-menu {
      .el-menu-item {
        @include sidebar-collapse-menu-style;
      }
      .el-submenu__title:hover {
        @include sidebar-collapse-menu-hover-style;
      }
      .el-menu-item:hover {
        @include sidebar-collapse-menu-hover-style;
      }
      .el-menu-item:not(.is-disabled):hover {
        @include sidebar-collapse-menu-hover-style;
      }
      .el-menu .el-submenu__title:hover {
        @include sidebar-collapse-menu-hover-style;
      }
    }
  }
  // 返回按钮样式
  .backIcon:hover {
    color: $breadcrumb-hover-color;
  }

  // table 样式
  .el-table {
    font-size: $font-size-small;
    border-right: none;
    thead {
      font-size: $font-size-small;
      th {
        font-weight: normal;
      }
      th.gutter{
        display: table-cell!important;
      }
    }
  }
  .el-table::after, .el-table::before {
    content: none;
  }

  // 搜索样式
  .search-form{
    .el-form-item--small.el-form-item {
      margin-bottom: 10px;
      .el-form-item__label {
        font-size: $font-size-small;
      }
      .el-input__inner{
        height: $form-item-height;
        line-height: $form-item-height;
        font-size: $font-size-middle;
      }
    }
  }

  // 表单
  .updateForm .el-form-item__label {
    font-size: $font-size-small;
  }
  // 按钮样式 默认
  .el-button--default{
    color: $reset-btn-color;
    background: $reset-btn-bg;
    border: $reset-btn-border;
    padding: 7px 10px;
    font-size: $font-size-middle;
  }
  //.el-button--default:focus,
  //.el-button--default:hover {
  //  background: $reset-btn-hover-bg;
  //  border: $reset-btn-hover-border;
  //  color: $reset-btn-hover-color;
  //}
  // 按钮样式 搜索
  .search-btn.el-button {
    background: $search-btn-bg;
    color: $search-btn-color;
    border: $search-btn-border;
    padding: 7px 10px;
    font-size: $font-size-middle;
  }
  .search-btn.el-button:focus,
  .search-btn.el-button:hover {
    background: $search-btn-hover-bg;
    border: $search-btn-hover-border;
    color: $search-btn-hover-color;
  }
  // 按钮样式 重置
  .reset-btn.el-button{
    color: $reset-btn-color;
    background: $reset-btn-bg;
    border: $reset-btn-border;
    padding: 7px 10px;
    font-size: $font-size-middle;
  }
  .reset-btn.el-button:focus,
  .reset-btn.el-button:hover {
    background: $reset-btn-hover-bg;
    border: $reset-btn-hover-border;
    color: $reset-btn-hover-color;
  }
  // 按钮样式 重置
  .add-btn.el-button{
    color: $add-btn-color;
    background: $add-btn-bg;
    border: $add-btn-border;
    padding: 10px;
    font-size: $font-size-middle;
  }
  .add-btn.el-button:focus,
  .add-btn.el-button:hover {
    background: $add-btn-hover-bg;
    border: $add-btn-hover-border;
    color: $add-btn-hover-color;
  }
  .main-container .search-btn,.main-container .reset-btn,.search-form .el-button, .main-container .add-btn, .confirm-btn, .cancel-btn {
    padding-top:7px;
    padding-bottom:7px;
    height: $btn-height;
  }
  // confirm & cancel按钮样式 重置
  .confirm-btn.el-button{
    background: $confirm-btn-bg;
    color: $confirm-btn-color;
    border: $confirm-btn-border;
    padding: 7px 10px;
    font-size: $font-size-middle;
  }
  .confirm-btn.el-button:focus,
  .confirm-btn.el-button:hover {
    background: $confirm-btn-hover-bg;
    border: $confirm-btn-hover-border;
    color: $confirm-btn-hover-border;
  }
  .cancel-btn.el-button{
    color: $cancel-btn-color;
    background: $cancel-btn-bg;
    border: $cancel-btn-border;
    padding: 7px 10px;
    font-size: $font-size-middle;
  }
  .cancel-btn.el-button:focus,
  .cancel-btn.el-button:hover {
    background: $cancel-btn-hover-bg;
    border: $cancel-btn-hover-border;
    color: $cancel-btn-hover-color;
  }
  // 上导航栏的主题切换设置
  .navbar {
    color: $side-text;
    background-color: $theme-bg-color;
    .left-menu {
      color: $side-text;
      .hamburger-container {
        &:hover {
          background-color: $theme-bg-color;
        }
      }
      .hamburger, .lang-svg {
        filter: drop-shadow($side-text 0px 80px);
        transform: translateY(-80px);
      }
    }
  }

  // sidebar-container 主题切换样式设置
  .sidebar-container {
    background: $sidebar-container-bg;
  }

  .editLink {
    color: $table-link;
    cursor: pointer;
    padding: 0 10px;
  }

  // 给icon、span设置主题色
  .themeColor {
    color: $theme-color;
  }

  // 多选下拉框
  .el-tag.el-tag--info,.el-tag {
    background-color: $theme-color;
    border-color: none;
    color: $white;
    border-radius: 20px;
  }
  .el-select .el-tag__close.el-icon-close,.el-tag .el-icon-close {
    color: $theme-color;
    background-color:$white;

    &:hover{
      &:before,
      &:after {
        color: $theme-color;
      }
    }
  }
}
